<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

	<title>dynatree - tests for version 0.4</title>

	<!-- Include prototype: -->
	<!--
	<script src='http://www.prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js' type='text/javascript'></script>
	-->

	<!-- Include the required JavaScript libraries: -->
	<script src="../jquery/jquery.js" type="text/javascript"></script>
	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>

	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>

	<!-- Add code to initialize the tree when the document is loaded: -->
	<script type='text/javascript'>
	<!--
//    $.ui.dynatree.nodedatadefaults["icon"] = false; // Turn off icons by default

	$(function(){
		$("#tree").dynatree({
//			rootVisible: true,
			rootCollapsible: false,
			keyboard: true,
//			persist: true,
//            generateIds: true,
			clickFolderMode: 1, //3, //2,
			checkbox: true,
			selectMode: 2,
			children: [
				{title: "Node 1", expand: true, key: "1",
				 children: [
					{title: "Node 1.1", key: "11" },
					{title: "Node 1.2", isFolder: true, expand: true, key: "12",
						 children: [
									{title: "Node 1.2.1<br>Multi-line test" },
									{title: "Node 1.2.2", key: "122",
										 children: [
													{title: "Node 1.2.2.1", activate: true },
													{title: "Node 1.2.2.2", select: true },
													{title: "Node 1.2.2.3", focus: true }
													]
										 },
									{title: "Node 1.2.3",
										children: []
									}
									]
						 },
					{title: "Node 1.3", select: true },
					{title: "Node 1.4", isLazy: true }
					]
					},
				{title: "Node 2",
					children: [
								{title: "Node 2.1" }
						]
					}
			],

			onQueryActivate: function(activate, node) {
				logMsg("onQueryActivate(%o, %o)", activate, node);
			},
			onActivate: function(node) {
				logMsg("onActivate(%o)", node);
				$("#echoActive").text(node.data.title);
			},
			onDeactivate: function(node) {
				logMsg("onDeactivate(%o)", node);
				$("#echoActive").text("-");
			},

			onQuerySelect: function(select, node) {
				logMsg("onQuerySelect(%o, %o)", select, node);
				if( node.isFolder )
					return false;
			},
			onSelect: function(select, node) {
				logMsg("onSelect(%o, %o)", node);
				var s = node.tree.getSelectedNodes().join(", ");
				$("#echoSelected").text(s);
			},

			onQueryExpand: function(expand, node) {
				logMsg("onQueryExpand(%o, %o)", expand, node);
			},
			onExpand: function(expand, node) {
				logMsg("onExpand(%o, %o)", expand, node);
			},

			onLazyRead: function(node) {
				logMsg("onLazyRead(%o)", node);
				var fakeJsonResult = [
					{ title: 'Lazy node 1', isLazy: true, select: false },
					{ title: 'Simple node 2', select: true }
				];
				function fakeAjaxResponse() {
					return function() {
						node.addChild(fakeJsonResult);
						// Remove the 'loading...' status:
						node.setLazyNodeStatus(DTNodeStatus_Ok);
					};
				}
				window.setTimeout(fakeAjaxResponse(), 1500);
			},

			onFocus: function(node) {
				logMsg("onFocus(%o)", node);
				$("#echoFocused").text(node.data.title);
			},
			onBlur: function(node) {
				logMsg("onBlur(%o)", node);
				$("#echoFocused").text("-");
			},

			onClick: function(node, event) {
				logMsg("onClick(%o, %o)", node, event);
				//return false;
			},
			onDblClick: function(node, event) {
				logMsg("onDblClick(%o, %o)", node, event);
				node.toggleSelect();
			},
			onKeydown: function(node, event) {
				logMsg("onKeydown(%o, %o)", node, event);
				switch( event.which ) {
				case 32: // [space]
					node.toggleSelect();
					return false;
				case 100: // 'd'
					$("#tree").dynatree("disable");
					return false;
				}
			},
			onKeypress: function(node, event) {
				logMsg("onKeypress(%o, %o)", node, event);
			}

		});


		$("#btnSelectAll").click(function(){
			$("#tree").dynatree("getRoot").visit(function(node){
				node.select(true);
			});
//			return false;
		});
		$("#btnDeselectAll").click(function(){
			$("#tree").dynatree("getRoot").visit(function(node){
				node.select(false);
			});
			return false;
		});
		$("#btnVisit").click(function(){
			$("#tree").dynatree("getRoot").visit(function(node){
				logMsg("%o", node);
			});
		});
		$("#btnGetSelected").click(function(){
			var nodeList = $("#tree").dynatree("getTree").getSelectedNodes(true);
			logMsg(nodeList)
		});
		$("#btnSerialize").click(function(){
			var dict = $("#tree").dynatree("getTree").toDict();
			logMsg("Serialized: %o", dict);
		});
		$("#btnModify").click(function(){
			var node= $("#tree").dynatree("getTree").getNodeByKey("1");
		   node.data.title = "New title: " + Date();
		   node.render();
		});
		$("#btnEnable").click(function(){
			$("#tree").dynatree(this.checked ? "enable" : "disable");
		});
		$("#btnBind").click(function(){
			$("#tree").dynatree(this.checked ? "bind" : "unbind");
		});
		$("#btnTest").click(function(){
			var tree = $("#tree").dynatree("getTree");
			var parentNode = tree.getNodeByKey("1");
			var beforeNode = tree.getNodeByKey("12");
			parentNode.addChild({title: "NEW NODE"}, beforeNode);
/*
			var parentDiv = parentNode.div;
			var childs = parentDiv.getElementsByTagName("DIV");
			var child = parentDiv.firstChild; // title <span>
			while( child ) {
				child = child.nextSibling; // title <span>
				alert(child);
			}
//			for(i=0; i<childs.length; i++)
//				alert(i+": "+childs[i]);
*/
		});

		$("#tree a").hover(function(){
				var node = $(this).parents("[dtnode]").attr("dtnode");
				logMsg("Hover in %s", node);
			}, function(){
				var node = $(this).parents("[dtnode]").attr("dtnode");
				logMsg("Hover out %s", node);
			});
	});


	-->
	</script>
</head>
<body>
	<P>This file is only temporarily used to reproduce issues.</P>
	<p style="color: red;">Using doctype HTML 4.01 Strict.</p>
	<div id="tree">ERROR: Tree could not be loaded (requires JavaScript)!</div>

	<div>Active node: <span id="echoActive">-</span></div>
	<div>Selected nodes: <span id="echoSelected">-</span></div>
	<div>Focused node: <span id="echoFocused">-</span></div>
	<p>
		<input type="checkbox" id="btnEnable" checked="checked"><label for="btnEnable">Enabled</label>
		<br>
		<input type="checkbox" id="btnBind" checked="checked"><label for="btnBind">Bind events</label>
	</p>
	<p>
		<a href="#" id="btnSelectAll">Select all</a>
		<a href="#" id="btnDeselectAll">Deselect all</a>
		<br>
		<button id="btnVisit">visit</button>
		<button id="btnSerialize">serialize</button>
		<button id="btnModify">Change node title</button>
		<button id="btnGetSelected">Selected (stopOnParent)</button>
		<br>
		<button id="btnTest">Test</button>
	</p>


	<p><a href="http://dynatree.googlecode.com">jquery.dynatree.js</a></p>
</body>
</html>
